<template>
  <div class="container">
    <div class="title">事故案例情况</div>
    <div class="item">
      <div class="item-title">事故简报</div>
      <div class="info" v-html="accidentInfo"></div>
    </div>
    <div class="item">
      <div class="item-title">现场视频</div>
      <div class="video">
        <video 
          :src="videoUrl"
          autoplay
          controls
          muted
          width="330" 
          height="200"
        ></video>
      </div>
    </div>
    <div class="item">
      <div class="item-title">新闻资讯</div>
      <div class="list">
        <div 
          class="list-item" 
          v-for="(item,index) in news" 
          :key="index"
          @click="handleGo(item.accidentNewsUrl)"
        >
          {{ item.accidentBg }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { useRouter,useRoute } from "vue-router"; 
  const router = useRouter();
  const route = useRoute();

  //引入接口
  import {
    acciInfo, //事故简报
    acciVideo, //事故视频
  } from "../../utils/bridgeAreaControlApi";


  const accidentInfo = ref('');
  const news = ref([]);
  const acciInfoFunction = () => {
    acciInfo({
      bridge: route.query.bridge
    }).then((res) => {
      if(res.code === 200){
        accidentInfo.value = res.data.accidentInfo;
        news.value = res.data.news;
      }
    });
  };

  const videoUrl = ref('');
  const baseApi = `${import.meta.env.VITE_APP_BASE_API}bridge`;
  const acciVideoFunction = () => {
    acciVideo({
      bridge: route.query.bridge
    }).then((res) => {
      if(res.code === 200 && res.data.length){
        videoUrl.value = baseApi + res.data[0].url.split("bridge")[1];
      }
    });
  };

  const handleGo = (url) => {
    window.location.href = url;
  };

  onMounted(() => {
    acciInfoFunction();    
    acciVideoFunction();
  });
</script>

<style lang="scss" scoped>
.container{
  width: 100%;
  height: 100%;   
  .title{
    height: 68px;
    background-image:url('../../static/images/bridgeAreaControl/case-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: 500; 
    color: #fff;   
  }
  .item{
    margin: 16px 20px;
    background-color: #FFFFFF;
    box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.08);
    border-radius: 8px;
    .item-title{
      background: rgba(22,93,255,0.05);
      font-weight: 500;
      font-size: 18px;
      color: #262626;
      padding: 8px 0px 8px 8px;
    }
    .info{
      margin: 0 20px;
    }
    .video{
      text-align: center;
    }
    .list{
      margin: 0 8px;
      font-weight: 500;
      font-size: 14px;
      color: #165DFF;
      .list-item{
        padding: 16px 0;
        border-bottom: 1px solid rgba(38,38,38,0.08);
      }
    }
  }
}
</style>